<template>
    <div class="pro-table">
        <!-- 列选择器 -->
        <el-dropdown trigger="click" v-if="allColumns.length">
            <span class="el-dropdown-link"> 列设置<i class="el-icon-arrow-down el-icon--right"></i> </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item v-for="col in allColumns" :key="col.prop">
                        <el-checkbox v-model="innerVisibleColumns" :label="col.prop">
                            {{ col.label }}
                        </el-checkbox>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>

        <!-- 表格本体 -->
        <el-table v-bind="$attrs">
            <!-- 如果有 columns 配置，优先用配置模式 -->
            <template v-if="columns && columns.length">
                <el-table-column v-for="col in filteredColumns" :key="col.prop" v-bind="col">
                    <template v-for="(_, slotName) in $slots" #[slotName]="scope">
                        <slot :name="slotName" v-bind="scope" />
                    </template>
                </el-table-column>
            </template>

            <!-- 否则用默认插槽，兼容 el-table-column 原写法 -->
            <template v-else>
                <slot />
            </template>
        </el-table>
    </div>
</template>

<script setup>
import { computed, onMounted, ref, watch } from 'vue';

const props = defineProps({
    columns: {
        type: Array,
        default: () => []
    },
    modelValue: {
        type: Array,
        default: () => []
    }
});

const emit = defineEmits(['update:modelValue']);

// 内部可见列
const innerVisibleColumns = ref([]);

// 初始化列（配置式优先，否则解析插槽里的 el-table-column）
const allColumns = ref([]);

onMounted(() => {
    if (props.columns.length) {
        allColumns.value = props.columns;
    } else {
        // 兼容 slot 写法：从 $slots.default() 中读取 el-table-column 的 props
        const vnodes = (useSlots().default?.() || []).filter(v => v.type?.name === 'ElTableColumn');
        allColumns.value = vnodes.map(v => ({
            prop: v.props?.prop,
            label: v.props?.label,
            default: v.props?.default !== false
        }));
    }

    innerVisibleColumns.value = props.modelValue.length
        ? props.modelValue
        : allColumns.value.filter(c => c.default !== false).map(c => c.prop);
});

// 双向绑定
watch(innerVisibleColumns, val => {
    emit('update:modelValue', val);
});

// 筛选出可见列（仅在 columns 模式下用）
const filteredColumns = computed(() => allColumns.value.filter(col => innerVisibleColumns.value.includes(col.prop)));
</script>
